<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<title>收款</title>
		<link rel="stylesheet" type="text/css" href="css/public.css" />
	</head>
	<style type="text/css">
		/*移动端1px下边线*/
		
		.border {
			position: relative;
		}
		
		.border:after {
			content: '';
			display: block;
			position: absolute;
			width: 100%;
			left: 0px;
			bottom: 0px;
			height: 1px;
			background-color: #efefef;
			-webkit-transform: scaleY(0.5);
			transform: scaleY(0.5);
		}
		
		.nav {
			height: 3.4rem;
			background: #0d6fb8;
			padding-top: 0.5rem;
		}
		
		.icon {
			height: 1.1rem;
			width: 1.2rem;
			color: #fff;
			margin: 0 0.3rem 0.4rem 0.3rem;
			float: left;
			font-size: 0.5rem;
		}
		
		.icon .img {
			height: 0.88rem;
			width: 0.88rem;
			margin-left: 0.15rem;
		}
		
		.icon .imgon {
			background: url(img/kx.png) no-repeat;
			background-size: 100% 100%;
		}
		
		.icon .img img {
			height: auto;
			width: 0.58rem;
			margin-left: 0.05rem;
		}
		
		.icon .text {
			width: 1.4rem;
			height: 0.3rem;
			font-size: 0.28rem;
			margin-top: 0.12rem;
			margin-left: -0.08rem;
		}
		
		.box {
			height: 1.8rem;
			width: 7.1rem;
			background: #fff;
			margin: 0.3rem auto;
			border-radius: 5px;
			padding-top: 0.2rem;
		}
		
		.box .input {
			font-size: 0.3rem;
			margin-top: 0.23rem;
			color: #999;
		}
		
		.box .on {
			font-size: 0.48rem;
			color: #000;
			margin-top: 0.2rem;
		}
		
		.keyboard {
			height: 5.6rem;
			width: 7.5rem;
			background: #fff;
			margin-top: 0.71rem;
		}
		
		.keyboard .row {
			height: 1.4rem;
		}
		
		.keyboard .row .key {
			height: 1.4rem;
			width: 1.85rem;
			border-right: solid 1px #efefef;
			text-align: center;
			font-size: 0.6rem;
			line-height: 1.4rem;
			color: #4f4f4f;
		}
		
		.keyboard .row .key img {
			width: 0.58rem;
			height: auto;
		}
		
		.rowbox {
			height: 2.8rem;
			width: 5.62rem;
		}
		
		.bottom .quer {
			height: 2.8rem;
			width: 1.9rem;
			background: #0D6FB8;
			text-align: center;
		}
		
		.bottom .quer p {
			font-size: 0.3rem;
			color: #fff;
		}
		
		.model {
			position: fixed;
			left: 0;
			top: 0;
			background: rgba(0, 0, 0, .5);
			height: 100%;
			width: 100%;
		}
		
		.modelcont {
			height: 6.4rem;
			width: 6.4rem;
			background: #fff;
			position: absolute;
			left: 0.2rem;
			top: 3rem;
			border-radius: 5px;
			padding: 0.45rem 0.35rem;
		}
		
		.mdheader {
			height: 0.65rem;
			font-size: 0.34rem;
		}
		
		.mdheader img {
			width: 0.3rem;
			height: 0.3rem;
		}
		
		.modelcont .text {
			height: 1.75rem;
			font-size: 0.5rem;
			text-align: center;
			line-height: 1.75rem;
		}
		
		.modelcont .item {
			height: 1.35rem;
		}
		
		.modelcont .buttomquer {
			height: 0.88rem;
			width: 5.72rem;
			border-radius: 5px;
			background: #0D6FB8;
			color: #fff;
			font-size: 0.36rem;
			margin-left: 0.3rem;
			margin-top: 0.5rem;
			cursor: pointer;
		}
		
		.modelcont .item .itemleft {
			height: 1.35rem;
			width: 6rem;
		}
		
		.modelcont .item .rightarr img {
			width: 0.2rem;
			height: auto;
		}
		
		.itemlefthead {
			height: 0.48rem;
			margin-top: 0.2rem;
			font-size: 0.28rem;
		}
		
		.itemlefthead img {
			height: auto;
			width: 0.54rem;
		}
		
		.itemlefthead .tis {
			padding: 0.02rem 0.12rem;
			border: solid 1px #f8a63a;
			color: #f8a63a;
			border-radius: 5px;
			margin: 0 0.2rem;
		}
		
		.itemlefthead .td {
			margin-left: 0.7rem;
			margin-right: 0.5rem;
		}
		
		.itemlefttis {
			font-size: 0.26rem;
			margin-top: 0.1rem;
		}
		
		.itemleft img {
			height: auto;
			width: 0.46rem;
		}
		
		.itemleft p {
			font-size: 0.34rem;
			margin-left: 0.25rem;
		}
		
		#wrapper {
			height: 5.4rem;
			overflow: hidden;
			border-bottom: solid #E5E5E5 1px;
		}
		
		#wrapperbank {
			height: 5.4rem;
			overflow: hidden;
		}
		
		#payModel .rightarr img {
			width: 0.34rem;
			height: auto;
			display: none;
		}
		
		#payModel .payheader {
			height: 0.8rem;
			font-size: 0.3rem;
			margin-top: -0.44rem;
			border-bottom: solid 1px #E5E5E5;
		}
		
		#payModel .payheader img {
			height: 0.35rem;
			width: auto;
		}
		
		#payModel .payheader p {
			margin-left: 1.9rem;
		}
		
		#bankModel .rightarr img {
			width: 0.34rem;
			height: auto;
			display: none;
		}
		
		#bankModel .payheader {
			height: 0.8rem;
			font-size: 0.3rem;
			margin-top: -0.44rem;
			border-bottom: solid 1px #E5E5E5;
		}
		
		#bankModel .payheader img {
			height: 0.35rem;
			width: auto;
		}
		
		#bankModel .payheader p {
			margin-left: 1.9rem;
		}
		
		#bankModel .changeCard {
			height: 1rem;
			border-top: #E5E5E5 solid 1px;
			font-size: 0.3rem;
		}
		
		#bankModel .changeCard p {
			margin-left: 2rem;
		}
		
		#bankModel .changeCard img {
			height: 0.34rem;
			width: auto;
			margin-left: 2rem;
		}
	</style>

	<body>
		<!--头部header开始-->
		<header class="flex flex-align-center">
			<div class="left flex flex-align-center">
				<img src="img/arrleft.png" alt="" class="arrleft" />
			</div>
			<div class="title">收款</div>
			<div class="right flex flex-pack-center flex-align-center" onclick="Util.jump('./lowerRates.html?userId=2000')">降费率</div>
		</header>
		<!--头部header结束-->
		<!--导航nav部分开始-->
		<div class="nav">
			<div id="paylist">
				<!--支付列表-->
			</div>
			<!--<div class="icon flex flex-align-center flex-pack-center">
				<p>...</p>
			</div>-->
		</div>
		<!--导航nav部分结束-->
		<!--输入框-->
		<div class="box flex">
			<p style="color: #0D6FB8;font-size: 0.6rem;font-weight: bold;margin-left: 0.5rem;width: 0.7rem;">￥</p>
			<div class="input">请输入收款金额</div>
		</div>
		<!-- 自定义键盘开始-->
		<div class="keyboard">
			<div class="row border flex">
				<div class="key">1</div>
				<div class="key">2</div>
				<div class="key">3</div>
				<div class="key" style="border-right: none;">=</div>
			</div>
			<div class="row border flex">
				<div class="key">4</div>
				<div class="key">5</div>
				<div class="key">6</div>
				<div class="key" style="border-right: none;">
					<img src="img/back.png" alt="" />
				</div>
			</div>
			<div class="bottom flex">
				<div class="rowbox">
					<div class="row border flex">
						<div class="key">7</div>
						<div class="key">8</div>
						<div class="key" style="border-right: none;">9</div>
					</div>
					<div class="row border flex">
						<div class="key">0</div>
						<div class="key">+</div>
						<div class="key" style="border-right: none;">.</div>
					</div>
				</div>
				<div class="quer flex flex-pack-center flex-v">
					<p>确认</p>
					<p>收款</p>
				</div>
			</div>
		</div>
		<!-- 自定义键盘结束-->
		<!--收款model框开始-->
		<div class="model" hidden id="mainModel">
			<div class="modelcont">
				<div class="mdheader border flex ">
					<div>
						<img src="img/close.png" alt="" id="close" />
					</div>
					<p style="margin-left: 2.54rem;">收款</p>
				</div>
				<div class="text border">
					<p>￥<span id="money">1.00</span></p>
				</div>
				<!--收款方式开始-->
				<div class="item border flex flex-align-center" id="payMethod">
					<div class="itemleft">
						<div class="itemlefthead flex flex-align-center">
							<img src="img/model-wechat.png" />
							<div class="tis">银联快捷 特惠</div>
							<div class="td">D0</div>
							<div class="feil">费率0.35</div>
						</div>
						<div class="itemlefttis">
							(刷卡额度：2~20000元,运营时间：8:00~20:00)
						</div>
					</div>
					<div class="rightarr flex flex-align-center">
						<img src="img/rightarr.png" />
					</div>
				</div>
				<!--收款方式结束-->
				<!--银行卡开始-->
				<div class="item border flex flex-align-center" id="bankCard">
					<div class="itemleft flex flex-align-center">
						<img src="img/gs.png" alt="" />
						<p>工商银行卡（0707）</p>
					</div>
					<div class="rightarr flex flex-align-center">
						<img src="img/rightarr.png" />
					</div>
				</div>
				<!--银行卡结束-->
				<div class="buttomquer flex flex-align-center flex-pack-center">
					<p>确认收款</p>
				</div>
			</div>
		</div>
		<!--收款model框结束-->
		<!--选择收款方式开始-->
		<div class="model" id="payModel" hidden>
			<div class="modelcont">
				<div class="payheader flex flex-align-center">
					<img src="img/marrleft.png" />
					<p>选择收款方式</p>
				</div>
				<div id="wrapper">
					<ul>
						<li>
							<!--收款方式开始-->
							<div class="item border flex flex-align-center">
								<div class="itemleft">
									<div class="itemlefthead flex flex-align-center">
										<img src="img/model-wechat.png" />
										<div class="tis">银联快捷 特惠</div>
										<div class="td">D0</div>
										<div class="feil">费率0.35</div>
									</div>
									<div class="itemlefttis">
										(刷卡额度：2~20000元,运营时间：8:00~20:00)
									</div>
								</div>
								<div class="rightarr flex flex-align-center">
									<img src="img/xz.png" />
								</div>
							</div>
							<!--收款方式结束-->
						</li>
						<li>
							<!--收款方式开始-->
							<div class="item border flex flex-align-center">
								<div class="itemleft">
									<div class="itemlefthead flex flex-align-center">
										<img src="img/model-wechat.png" />
										<div class="tis">银联快捷 特惠</div>
										<div class="td">D0</div>
										<div class="feil">费率0.35</div>
									</div>
									<div class="itemlefttis">
										(刷卡额度：2~20000元,运营时间：8:00~20:00)
									</div>
								</div>
								<div class="rightarr flex flex-align-center">
									<img src="img/xz.png" />
								</div>
							</div>
							<!--收款方式结束-->
						</li>
						<li>
							<!--收款方式开始-->
							<div class="item border flex flex-align-center">
								<div class="itemleft">
									<div class="itemlefthead flex flex-align-center">
										<img src="img/model-wechat.png" />
										<div class="tis">银联快捷 特惠</div>
										<div class="td">D0</div>
										<div class="feil">费率0.35</div>
									</div>
									<div class="itemlefttis">
										(刷卡额度：2~20000元,运营时间：8:00~20:00)
									</div>
								</div>
								<div class="rightarr flex flex-align-center">
									<img src="img/xz.png" />
								</div>
							</div>
							<!--收款方式结束-->
						</li>
						<li>
							<!--收款方式开始-->
							<div class="item border flex flex-align-center">
								<div class="itemleft">
									<div class="itemlefthead flex flex-align-center">
										<img src="img/model-wechat.png" />
										<div class="tis">银联快捷 特惠</div>
										<div class="td">D0</div>
										<div class="feil">费率0.35</div>
									</div>
									<div class="itemlefttis">
										(刷卡额度：2~20000元,运营时间：8:00~20:00)
									</div>
								</div>
								<div class="rightarr flex flex-align-center">
									<img src="img/xz.png" />
								</div>
							</div>
							<!--收款方式结束-->
						</li>
						<li>
							<!--收款方式开始-->
							<div class="item border flex flex-align-center">
								<div class="itemleft">
									<div class="itemlefthead flex flex-align-center">
										<img src="img/model-wechat.png" />
										<div class="tis">银联快捷 特惠</div>
										<div class="td">D0</div>
										<div class="feil">费率0.35</div>
									</div>
									<div class="itemlefttis">
										(刷卡额度：2~20000元,运营时间：8:00~20:00)
									</div>
								</div>
								<div class="rightarr flex flex-align-center">
									<img src="img/xz.png" />
								</div>
							</div>
							<!--收款方式结束-->
						</li>
					</ul>
				</div>
			</div>
		</div>
		<!--选择收款方式结束-->
		<!--选择银行卡开始-->
		<div class="model" id="bankModel" hidden>
			<div class="modelcont">
				<div class="payheader  flex flex-align-center">
					<img src="img/marrleft.png" />
					<p>选择信用卡</p>
				</div>
				<div id="wrapperbank">
					<ul>
						<li>
							<!--银行卡开始-->
							<div class="item border flex flex-align-center" id="bankCard">
								<div class="itemleft flex flex-align-center">
									<img src="img/gs.png" alt="" />
									<p>工商银行卡（0707）</p>
								</div>
								<div class="rightarr flex flex-align-center">
									<img src="img/xz.png" />
								</div>
							</div>
							<!--银行卡结束-->
						</li>
						<li>
							<!--银行卡开始-->
							<div class="item border flex flex-align-center" id="bankCard">
								<div class="itemleft flex flex-align-center">
									<img src="img/gs.png" alt="" />
									<p>工商银行卡（0707）</p>
								</div>
								<div class="rightarr flex flex-align-center">
									<img src="img/xz.png" />
								</div>
							</div>
							<!--银行卡结束-->
						</li>
						<li>
							<!--银行卡开始-->
							<div class="item border flex flex-align-center" id="bankCard">
								<div class="itemleft flex flex-align-center">
									<img src="img/gs.png" alt="" />
									<p>工商银行卡（0707）</p>
								</div>
								<div class="rightarr flex flex-align-center">
									<img src="img/xz.png" />
								</div>
							</div>
							<!--银行卡结束-->
						</li>
						<li>
							<!--银行卡开始-->
							<div class="item border flex flex-align-center" id="bankCard">
								<div class="itemleft flex flex-align-center">
									<img src="img/gs.png" alt="" />
									<p>工商银行卡（0707）</p>
								</div>
								<div class="rightarr flex flex-align-center">
									<img src="img/xz.png" />
								</div>
							</div>
							<!--银行卡结束-->
						</li>
						<li>
							<!--银行卡开始-->
							<div class="item border flex flex-align-center" id="bankCard">
								<div class="itemleft flex flex-align-center">
									<img src="img/gs.png" alt="" />
									<p>工商银行卡（0707）</p>
								</div>
								<div class="rightarr flex flex-align-center">
									<img src="img/xz.png" />
								</div>
							</div>
							<!--银行卡结束-->
						</li>
					</ul>
				</div>
				<!--使用新卡付款开始-->
				<div class="changeCard flex flex-align-center">
					<p>使用新卡付款</p>
					<img src="img/rightarr.png" alt="" />
				</div>
			</div>
		</div>
		<!--选择银行卡结束-->
	<!--支付方式列表模板开始-->
	<script type="text/html" id="template_paylist">
		<%for(var i in data){%>
		<div class="icon" data-status="<%= data[i].status %>" >
				<div class="img flex flex-align-center flex-pack-center " data-paytype="<%= data[i].payType %>">
					<%if(data[i].status == 1){%>
					<img src="<%= data[i].icon[0] %>" alt="" />
					<%}else{%>
						<img src="<%= data[i].iconDis %>" alt="" />
					<%}%>
				</div>
				<div class="text flex flex-align-center flex-pack-center">
					<p><%= data[i].name %></p>
				</div>
		</div>
		<%}%>
	</script><!--支付方式列表模板结束-->
	
	</body>
	<script type="text/javascript" src="js/rem.js"></script>
	<script type="text/javascript" src="js/zepto.js"></script>
	<script type="text/javascript" src="js/template.js"></script>
	<script type="text/javascript" src="js/layer.js"></script>
	<script type="text/javascript" src="js/api.js"></script>
	<script type="text/javascript" src="js/common.js"></script>
	<script type="text/javascript" src="js/iscroll.js"></script>
	<script type="text/javascript">
		$(function() {//拉取支付方式
			Public.ChangePayByRece({
				method:'channel.query',
       			version:'1.0.2'
			}, function(res){
				console.log(res);
				html = template.render("template_paylist", res);
				$('#paylist').html(html);
				$('#paylist').children(".icon").first().children('.img').addClass('imgon');
				//icon点击响应事件
				$('.icon').click(function() {
					if($(this).data('status')===1){
						$(this).children('.img').addClass('imgon');
						$(this).siblings().children('.img').removeClass('imgon');
					}				
				});
			});
			
			//键盘确认收款按钮响应事件
			$('.quer').click(function() {
				var paytype = $('.imgon').data('paytype'); //获取支付列表中的支付方式
				var money = $(".input").text();
				var regz = new RegExp("^[1-9]*[1-9][0-9]*$"); //正整型正则匹配
				var regf = new RegExp("^(([0-9]+\\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\\.[0-9]+)|([1-9]*[1-9][0-9]*))$"); //浮点型正则匹配
				if(regz.test(money)) {
					money = money + '.00';
					$(".input").text(money);
					$("#money").text(money);
					Public.Confirm({
						method: 'channel.query.mercha.all',
						version:'1.0.2',
				        userId: 4603,//userId需动态获取
				        payType: paytype
					},function(res){
						if(res.data.channels[0].enabled === 0){	//判断是否可用，若不可用，返回错误信息
							layer.open({
								content:res.data.channels[0].remark,
								skin: 'msg',
								time: 2 //2秒后自动关闭
							});
						}else{
							$("#mainModel").show();
							
						}
					});
				} else if(regf.test(money)) {
					$("#money").text(money);
//					$("#mainModel").show();
				} else {
					layer.open({
						content: '请输入有效金额',
						skin: 'msg',
						time: 2 //2秒后自动关闭
					});
				}
			});
			/*********************************
			 * 收款model
			 * ********************************/
			//主model框关闭响应事件
			$('#close').click(function() {
				$('#mainModel').hide();
			});
			//选择收款方式
			$("#payMethod").click(function() {
				$('#payModel').show();
				//滚动脚本初始化
				var myScroll = new IScroll('#wrapper', {
					mouseWheel: true,
					click: true,
					tap: true
				});
			});
			$(".item").on("tap", function() {
				$(this).find(".rightarr").children('img').show();
				$(this).parent('li').siblings().find(".rightarr").children('img').hide();
			})
			//选择银行卡
			$("#bankCard").click(function() {
				$('#bankModel').show();
				//滚动脚本初始化
				var myScroll = new IScroll('#wrapperbank', {
					mouseWheel: true,
					click: true,
					tap: true
				});
			});
			/*********************************
			 * 选择支付方式model
			 * ********************************/
			$('.payheader').click(function() {
				$(this).parents(".model").hide();
			});
			/*********************************
			 * 键盘key
			 * ********************************/
			//键盘点击事件
			$(".key").click(function() {
				var val = $(this).text();
				if(val == '1' || val == '2' || val == '3' || val == '4' || val == '5' || val == '6' || val == '7' || val == '8' || val == '9' || val == '0' || val == '.') {
					var money = $(".input").text();
					if(money == '请输入收款金额') {
						$(".input").text(val).addClass('on');
					} else {
						money = money + val;
						$(".input").text(money).addClass('on');
					}
				} else if(val == '+') {
					if($(".input").text() != '请输入收款金额' && $(".input").text() != '') {
						var money = $(".input").text();
						money = money + val;
						$(".input").text(money).addClass('on');
					}
				} else if(val == '=') {
					var sum = 0;
					var arr = new Array();
					var money = $(".input").text();
					arr = money.split('+');
					if(arr.length == 1 && money.split('.').length == 1 && $(".input").text() != '请输入收款金额' && $(".input").text() != '') {
						var money = $(".input").text();
						money = money + '.00';
						$(".input").text(money);
					} else if(arr.length > 1) {
						for(var i = 0; i < arr.length; i++) {
							sum += Number(arr[i]);
						}
						if(money.split('.').length == 1 && $(".input").text() != '请输入收款金额' && $(".input").text() != '') {
							$('.input').text(sum + '.00');
						} else if($(".input").text() != '请输入收款金额' && $(".input").text() != '') {
							$('.input').text(sum);
						}
					}
				} else {
					var money = $(".input").text();
					if($(".input").text() != '请输入收款金额') {
						money = money.substring(0, money.length - 1);
						$('.input').text(money);
					}
				}
			});
		})
	</script>

</html>